<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>智慧农业物联网平台</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" /><!--CSS RESET-->
	<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="../css/ce.css"/>
	<link rel="stylesheet" type="text/css" href="css/introjs.min.css"/>
	<style>
		.demo{margin-top: 190px; padding: 20px 0;
		/*background: linear-gradient(to right,#7AB6B6 50%, #E5CFAA 50%);*/ 
		}
		.form-horizontal{
		    background:rgba(0,0,0,0.3);
		    font-family: 'Arimo', sans-serif;
		    text-align: center;
		    padding: 50px 30px 50px;
			
		    box-shadow: 12px 12px 0 0 rgba(0,0,0,0.1);
		    
		}

		.form-horizontal .heading{
		    color: white;
		    font-size: 25px;
		    font-weight: 600;
		    letter-spacing: 1px;
		    text-transform: capitalize;
		    margin: 0 0 50px 0;
		}

		.form-horizontal .form-group{
		    margin: 0 auto 30px;
		    position: relative;
		    
		}
        .form-group>input{
        	background: rgba(0,0,0,.3);
        	color: white;
        }
		.form-horizontal .form-group:nth-last-child(2){ margin-bottom: 20px; }

		.form-horizontal .form-group:last-child{ margin: 0; }

		.form-horizontal .form-group>i{
		    color: #999;
		    transform: translateY(-50%);
		    position: absolute;
		    left: 5px;
		    top: 50%;
		}

		.form-horizontal .form-control{
		    color: #7AB6B6;
		    background-color: #fff;
		    font-size: 17px;
		    letter-spacing: 1px;
		    height: 40px;
		    padding: 5px 10px 2px 25px;
		    box-shadow: 0 0 0 0 transparent;
		    border: none;
		    border-bottom: 1px solid rgba(0,0,0,0.1);
		    border-radius: 0;
		    display: inline-block;
		}

		.form-control::placeholder{
		    color: rgba(0,0,0,0.2);
		    font-size: 16px;
		}

		.form-horizontal .form-control:focus{
		    border-bottom: 1px solid #7AB6B6;
		    box-shadow: none;
		}

		.form-horizontal .btn{
		    color: #7AB6B6;
		    background-color: #EDF6F5;
		    font-size: 18px;
		    font-weight: 700;
		    letter-spacing: 1px;
		    border-radius: 5px;
		    width: 50%;
		    height: 45px;
		    padding: 7px 30px;
		    margin: 0 auto 25px;
		    border: none;
		    display: block;
		    position: relative;
		    transition: all 0.3s ease;
		}

		.form-horizontal .btn:focus,
		.form-horizontal .btn:hover{
		    color: #fff;
		    background-color: #7AB6B6;
		}

		.form-horizontal .btn:before,
		.form-horizontal .btn:after{
		    content: '';
		    background-color: #7AB6B6;
		    height: 50%;
		    width: 2px;
		    position: absolute;
		    left: 0;
		    bottom: 0;
		    z-index: 1;
		    transition: all 0.3s;
		}

		.form-horizontal .btn:after{
		    bottom: auto;
		    top: 0;
		    left: auto;
		    right: 0;
		}

		.form-horizontal .btn:hover:before,
		.form-horizontal .btn:hover:after{
		    height: 100%;
		    width: 50%;
		    opacity: 0;
		}

		.form-horizontal .create_account{
		    color: #D6BC8B;
		    font-size: 16px;
		    font-weight: 600;
		    display: inline-block;
		}

		.form-horizontal .create_account:hover{
		    color: #7AB6B6;
		    text-decoration: none;
		}
		body{
			height: 780px;
		}
		
		#username_a{
			background: rgba(0.0.0,.3);
		}
		#password_a{
			background: rgba(0.0.0,.3);
		}
		
		/**/
		
		.footer{
    position: fixed;
    bottom: 89px;
    /*background-color: rgba(0,0,0,0.3);*/
    width: 100%;
    text-align: center;
    /*text-align: center;*/
    /*color: #73777a;*/
}
.warp_ap {
    width: 407px;
    height: 126px;
    margin: 0 auto;
    font-size: 12px;
    color: #9b9ea0;
    margin-top:30px;
}
.sl {
    /*width: 33%;*/
    float: left;
    /*margin-left: 42px;*/
    /*margin-right: -54px;*/
    /*margin-top:30px;*/
    margin-right:68px;
}
.sl:last-child{
    margin-right:0;
}
.ewm {
    /*border: 1px solid #ececec;*/
    width: 80px;
    padding: 1px;
    float: left;
    color: white;
}
.ewm>span{
	top: 10px;
}
.warp_a {
    margin: 8px -3px;
}
.download-pc {
    border: 1px solid white;
    width: 100px;
    padding: 6px 6px 6px;
    float: left;
    font-size: 12px;
}
.download-btn {
    display: block;
    border-radius: 3px;
    height: 30px;
    background: url("../images/pcdownload.png") no-repeat left center #3f8ce6;
    text-align: center;
    padding: 6px 0 6px 10px;
    color: #fff;
    text-decoration: none;
}
.download-pc > ul, .download-pc > li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    color: #999;
    padding: 3px;
    text-align: left;
}
.other{
    text-align: left;
    margin-bottom:10px;
    font-size: 13px;
}
.copyright{
    color:#666;
    width:auto;
    margin-bottom:20px;
}
		
		 a.footer-link,a.footer-link:hover,a.footer-link:active,a.footer-link:visited,a.footer-link:link,a.footer-link:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline:none;
    background: none;
    text-decoration: none;
    color: #666;
  }
		
.contion_top{
	position: relative;
	top: -100px;
	width: 100%;
	text-align: center;
	font-size: 70px;
    font-weight: 700;
    color: white;
    text-shadow: #000 3px 4px 5px;
}		
.contion_top2{
	position: relative;
	top: -110px;
	width: 100%;
	text-align: center;
	font-size: 26px;
    font-weight: 700;
    color: white;
    text-shadow: #000 3px 4px 5px;
}			
		.fly-in {
    -webkit-animation: fly-in .8s ease;
    -moz-animation: fly-in .8s ease;
    -o-animation: fly-in .8s ease;
    animation: fly-in .8s ease;
}
@keyframes fly-in{
0% {
    transform: translateY(-100%);
}

100% {
    transform: translateY(0%);
}
}

		
	</style>
</head>
<body
	<div style="position: fixed;width: 100%;height: 100%;background: url(./6.jpg);z-index: 2;background-size: 100% 100vh">
	<div class="htmleaf-container">
		<heading></heading>
		 <div class="demo form-bg">
	        <div class="container">
                 <div  class="contion_top">智慧农业物联网平台</div>
                 <div  class="contion_top2">Intelligent agriculture Internet of things platform</div>
	            <div class="row">
	                <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
	                    <form  class="form-horizontal fly-in" id="form1">
	                        <div class="heading">登录</div>
	                        <div class="form-group">
	                            <i class="fa fa-user" style="color: white;"></i><input  required  name="username" type="" class="form-control" placeholder="用户名" id="username">
	                        </div>
	                        <div class="form-group">
	                            <i class="fa fa-lock" style="color: white;"></i><input  required name="passWord" type="password" class="form-control" id="password" placeholder="密码"/>
	                        </div>
	                        <div class="form-group">
	                            <div id="submitBtn"  class="btn btn-default"><i class="fa fa-arrow-right"></i></div>
	                        </div>
	                    </form>
	                </div>
	            </div>
	        </div>
	    </div>
		
	</div>
	
	  <!--<div class="footer">
    <div class="warp_ap">
      <div class="sl">
        <div class="ewm">
          <img src="app.png" big-img="app.png" style="width: 80px; height: 80px; cursor: pointer;">
          <span>手机APP</span>
        </div>
      </div>
      <div class="sl">
        <div class="ewm" style="position: relative; z-index: 9998;">
          <img src="wx.jpg" big-img="wx.jpg" style="width:80px; height:80px;">
          <span>微信公众号</span>
        </div>
      </div>
      
  
      <div class="sl" id="step1">
        <a href="http://testfood.cn/">
        <div class="download-pc" style="width: 98px;height: 98px;">
          <img style="width: 68px;height: 68px;" src="./jb.png">
          <div style="color: white;">去旧版</div>
        </div>
        
        </a>
      </div>
    </div>
    
  </div>-->
	
	

	
	<div style="position: fixed; bottom: 0; background-color: rgba(0,0,0,0.3); height: 70px; width: 100%; text-align: center; vertical-align: middle; color: White; padding-top: 25px;">
            版权所有 © 智慧农业物联网平台 2020-2021 <a href="http://www.beian.miit.gov.cn/" style="color: white;"></a>
        </div>
        </div>
</body>
<script type="text/javascript" src="https://www.wjx.cn/js/ap.js?activity=72398463" id="wjxFloatBtnJsCode"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/ce.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/ce-form.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/best.js" type="text/javascript" charset="utf-8"></script>
<script src="js/cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="js/intro.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	
	  $.ajax({
	                 url :basePath + '/login/loginout.do',
	                 type : "get",
	                 dataType: "json",
	                 xhrFields:{withCredentials:true},
	                 async : false,
	                 success : function(result) {
	                 	
	                 }
        })
	
hui.formInit();
//.vc16vc12,.cq8,.c8c16c24,.bchtcq,.cq10,.cq12,.xqh,.zjsf
//表单元素数据收集演示
hui('#submitBtn').click(function() {
	var login = $('#username').val();
	var pwd = $('#password').val();
	var JsonData = {
		userName: login,
		passWord: pwd
	};

	if(login=='') {
       hui.toast("请输入用户名");
	} else if(pwd=='') {
       hui.toast("请输入密码");
	} else {
		hui.loading('数据加载中...');
		$.ajax({
	                 url :basePath + '/login/login.do',
	                 type : "post",
	                 dataType: "json",
	                 xhrFields:{withCredentials:true},
	                 
	                 data: {"JsonData":JSON.stringify(JsonData)},
	                 async : false,
	                 success : function(result) {
	                     console.log(result);
	                     if (result.state){
	                     	addCookie('userPhone',result.data.cellphone,24*365);
	                     	addCookie('userName',result.data.loginName,24*365);
	                     	window.location.href="../main/AutomaticInsecticidalLamp.html"
	                     }else{
	                       hui.alert(result.msg);
	                     }
	                 },
	                 error:function(result){
	                 	hui.alert("500后台接口出错了！");
	                 }
	                })
		
	}

})
</script>
<script type="text/javascript">
	 $(function(){
    var cookieName="wlw3_is_intro";
    // 放大二维码 便于扫描
    $('.ewm').hover(function(){
      var o = $(this);
      o.css({
        position:'relative',
        'z-index':9998
      });
      zoom(o.find('img').eq(0),true);
    },function(){
      zoom(null,false);
    });

    // 使用download-link属性设置下载链接
    $("[download-link]").each(function(i){
      var o = $(this),href = o.attr('download-link');
      if(href) o.css({'cursor':'pointer'});
      o.on('click',function(e){
        if(href && href != '#') window.open(href,'_blank');
        else alert('请使用手机扫描下载!');
      })
    });
   

    function zoom(obj,flag){
      if(!flag) {$(".qr-big").remove();  return false;         }
      var big = obj.attr("big-img");
      if(!big) return false;
      var x = obj.offset().left;
      var y = obj.offset().top;
      var img = new Image;
      img.src = big;
      img.onload = function(){
        var h = img.height;
        var w = img.width;
        var con = $("<div>");
        con.addClass('qr-big');
        con.css({
          position:'absolute',
          'padding':'15px',
          'background':'#fff',
          'border':'1px solid #d5d5d5',
          'box-shadow':'0px 0px 10px 2px rgba(100,100,100,.6)',
          'z-index':9999,
          left:x - w/2 + 30,
          top: y - h - 48
        });
        con.html("<img src='"+big+"' alt=''>");
        con.appendTo($("body"));
      }
    }

 
    
    function startIntro(){
      var intro = introJs();
      intro.setOptions({'prevLabel':'&larr; 上一步','nextLabel':'下一步 &rarr;','skipLabel':'跳过','doneLabel':'知道了',
        steps: [
          {
            intro: "智慧农业物联网换新版啦!"
          },
          {
            element: document.querySelector('#step1'),
            intro: "如果您还是习惯使用旧版，可以在登录页底部点击切换到旧版",
            position:"top"
          }
        ]
      });

      intro.start().oncomplete(function () {
        addCookie(cookieName,1,24*365);
      });
    }

    function isIntro(){
    	$().fadeOut()
      var isHas= getCookie(cookieName);
      if(isHas&&isHas==1)
      {
        return true;
      }
      else
      {
        return false;
      }
    }
    
});
</script>
</html>
